import { MenuButton } from "@/components/Header/MenuButton.tsx";
import { useState } from "react";
import { LockState } from "@meta2d/core";
import { lockedMap } from "@/config/lockedMap.tsx";

export function CanvasLocked() {
  const [locked, setLocked] = useState<keyof typeof lockedMap>(LockState.None);
  const setLockMode = (t: LockState) => {
    window.meta2d.store.data.locked = t;
  };
  const handleToggle = () => {
    if (locked == LockState.None) {
      setLockMode(LockState.DisableEdit);
      setLocked(() => LockState.DisableEdit);
    }
    if (locked == LockState.DisableEdit) {
      setLockMode(LockState.DisableMove);
      setLocked(() => LockState.DisableMove);
    }
    if (locked == LockState.DisableMove) {
      setLockMode(LockState.None);
      setLocked(() => LockState.None);
    }
  };
  return (
    <MenuButton
      onClick={handleToggle}
      title={lockedMap[locked].title}
      children={lockedMap[locked].icon}
      color={lockedMap[locked].color}
    ></MenuButton>
  );
}
